import { createRef, Component } from "react";
import "./global.scss";

interface Props {
  genderName: string;
}

export default class App extends Component<Props> {
  usernameRef = createRef<HTMLInputElement>();
  remarksRef = createRef<HTMLTextAreaElement>();
  genderRef = createRef<HTMLDivElement>();
  fruitsRef = createRef<HTMLDivElement>();
  flagRef = createRef<HTMLInputElement>();
  cityRef = createRef<HTMLSelectElement>();

  state = {
    username: "admin",
    gender: 1,
  };

  submit = () => {
    // ... 非受控的方式获取表单元素的内容
    // console.log(document.querySelector("#username").value);
    console.log("username", this.usernameRef.current?.value);
    console.log("remarks", this.remarksRef.current?.value);
    // 获取到勾选的DOM
    const checkedGender = this.genderRef.current?.querySelector(
      '[type="radio"]:checked'
    ) as HTMLInputElement | null;

    console.log("gender", checkedGender?.value);

    // 获取 fruitsRef.current 元素下勾选的 checkbox 集合
    const checkedFruits = this.fruitsRef.current?.querySelectorAll(
      '[type="checkbox"]:checked'
    ) as NodeListOf<HTMLInputElement>;
    console.log("checkedFruits", checkedFruits);
    // 映射出 value 值数据
    const checkedFruitsValue = Array.from(checkedFruits).map((el) => el.value);

    console.log("checkedFruitsValue", checkedFruitsValue);

    console.log("flag", this.flagRef.current?.checked);
    console.log("city", this.cityRef.current?.value);
  };

  render() {
    console.log("App Render");
    return (
      <div>
        <h1>表单元素</h1>
        <hr />
        <label className="item">
          <span className="item_label">用户名：</span>
          <div className="item_content">
            <input ref={this.usernameRef} defaultValue={this.state.username} />
          </div>
        </label>

        <label className="item">
          <span className="item_label">备注：</span>
          <div className="item_content">
            <textarea ref={this.remarksRef} />
          </div>
        </label>

        <label className="item">
          <span className="item_label">性别：</span>
          <div className="item_content" ref={this.genderRef}>
            <input
              type="radio"
              name={this.props.genderName}
              value={0}
              defaultChecked={this.state.gender === 0}
            />
            男
            <input
              type="radio"
              name={this.props.genderName}
              value={1}
              defaultChecked={this.state.gender === 1}
            />
            女
          </div>
        </label>

        <label className="item">
          <span className="item_label">爱好：</span>
          <div className="item_content" ref={this.fruitsRef}>
            <label>
              <input type="checkbox" value={"Apple"} />
              Apple
            </label>
            <label>
              <input type="checkbox" value={"Banana"} />
              Banana
            </label>
            <label>
              <input type="checkbox" value={"Orange"} />
              Orange
            </label>
          </div>
        </label>

        <label className="item">
          <span className="item_label">协议：</span>
          <div className="item_content">
            <label>
              <input type="checkbox" ref={this.flagRef} />
              <span>是否同意</span>
            </label>
          </div>
        </label>

        <label className="item">
          <span className="item_label">城市：</span>
          <div className="item_content">
            <select ref={this.cityRef}>
              <option value="">请选择</option>
              <option value="001">北京</option>
              <option value="002">上海</option>
              <option value="003">广州</option>
              <option value="004">深圳</option>
            </select>
          </div>
        </label>

        <button onClick={this.submit}>注册</button>
      </div>
    );
  }
}
